<template>
<!-- 中奖者 -->
	<view class="main-body">
		<van-pull-refresh
			:pulling-text="i18n.common.pulling_text"
			:loosing-text="i18n.common.loosing_text"
			:loading-text="i18n.common.loading"
			v-model="refreshing"
			@refresh="onRefresh">
		<scroll-view class="uni-tab-bar" scroll-y="true">
			<van-list
				v-model="loading"
				:finished="finished"
				:finished-text="i18n.common.no_more"
				:loading-text="i18n.common.loading"
				@load="onLoad2">
				
				<!-- <view v-for="(item,index) in willDoList" :key="index" class="cell bg-light-secondary my-1">			 -->
				<view v-for="(item,index) in willDoList" :key="index" class="cell my-1">			
					<!--揭晓状态-->
					<view @click="lotteryDetail(item)">
					<view v-if="item.status=='已揭晓'" class="item d-flex j-sb p-1" style="padding-top: 10px;">
						<view class="item-left d-flex" style="position:relative">
							<image  style="width: 190rpx;height: 190rpx;border-radius: 10rpx;margin: 0 auto;" :src="item.good_header"></image><!-- mode="widthFix" -->
						</view>
						<view class="item-right d-flex flex-column">
							<view class="item-right-title">
								<!-- 第  期 -->
								<text style="font-size: 12px;color: #333;">
									[{{i18n.common.di}} {{item.good_period}} <text class="f10">{{i18n.common.expect}}</text>] {{item.good_name}}
								</text>
							</view>
							<view class="item-right-content d-flex flex-column j-center a-start">
								<view class="item-rt-btm-list">
									<!--获奖者-->
									<text class="f10 c-b3">{{i18n.winner_page.t1}}：</text>
								    <text style="color: #d81414;font-size: 10px;">{{item.nick_name}}</text>
								</view>
								<view class="item-rt-btm-list">
									<!--幸运-->
									<text class="f10 c-b3">{{i18n.winner_page.t2}}：</text>
								    <text style="color: #d81414;font-size: 10px;">{{item.win_num}}</text>
								</view>
								<view class="item-rt-btm-list">
									<!--本次参与-->
									<text class="f10 c-b3">{{i18n.winner_page.t3}}：</text>
									<!---人次-->
								    <text style="color: #626262;font-size: 10px;">{{item.play_num}}{{i18n.winner_page.t5}}</text>
								</view>
								<view class="item-rt-btm-list">
									<text class="f10 c-b3">{{i18n.winner_page.t4}}：</text> <!---揭晓时间---->
								    <text style="color: #626262;font-size: 10px;">{{item.real_lottery_time?'2021-'+item.real_lottery_time:item.lottery_time}}</text>
								</view>
							</view>
						</view>
					</view>
					<!--倒计时状态-->
					<view v-if="item.status=='倒计时'" class="item d-flex j-sb p-1" style="position:relative">
						<view class="item-left d-flex a-center">
							<image mode="widthFix" style="width: 195rpx;height: 190rpx" :src="item.good_header"></image>
						</view>
						<view class="item-right d-flex flex-column j-center">
							<view class="item-right-title">
								<text style="font-size: 12px;color: #333;">[{{i18n.common.di}}{{item.good_period}}{{i18n.common.expect}}] {{item.good_name}}</text>
							</view>
							<view class="item-right-content d-flex  a-center mt-2">
								<image mode="widthFix" style="width: 24px;margin-right: 10px;" src="/static/images/clock.png"></image>
								<image mode="widthFix" class="active-img" src="/static/images/lotteryLabel.png"></image>
								<view>
									<van-count-down millisecond :time="caculateTime(item.lottery_time)" format="mm:ss:SS" @finish="finish(item.id)">
									  <!-- <template #default="timeData">
									    <span class="block">{{ timeData.minutes }}</span>
									    <span class="colon">:</span>
									    <span class="block">{{ timeData.seconds }}</span>
										<span class="colon">:</span>
										<span class="block milliseconds">{{ timeData.milliseconds }}</span>
									  </template> -->
									</van-count-down>
								</view>
							</view>
						</view>
					</view>
					</view>
				</view>
			</van-list>
		  </scroll-view>
		</van-pull-refresh>
		<!-- 中奖弹出 -->
		<van-overlay :show="overlayShow" @click="overlayShow = false">
  			<view class="over-wrapper" @click.stop>
    			<view class="over-block">
					<view class="over-title">
						{{i18n.common.gx}}
					</view>
					<view class="over-main">
						<view class="over-pic">
							 <image style="width: 100upx; height: 100upx;" mode="widthFix" :src="goodHeader"></image>
						</view>
						<view class="over-desc">
							<text class="sp">{{winProduct}}</text>
							<!-- <text class="big">{{winName}}</text> -->
							<!-- <text class="sm">{{i18n.common.hj}}</text> -->
						</view>
						<view class="over-btn" @click="queryDetails">
							<!-- <navigator url="https://www.baidu.com/"> -->
								{{i18n.common.query}}
							<!-- </navigator> -->
						</view>
					</view>
				</view>
  			</view>
		</van-overlay>

	</view>
	
</template>

<script>
	import { getWillDoList, getLotteryGoodDetail, getUserInfo } from '@/api/lottery.js';
	import { mapGetters } from "vuex";
	  export default{
		  data(){
			  return{
				overlayShow: false,
				loading: false,
				finished: false,
				refreshing: false, 
				currentPage: 1,
				ismk:'n' ,//开奖类型 是否是秒开,
				limitNum:10,
				willDoList:[],
				time:30*1000,
				isEmpty:true,
				scrollH:0,
				winName: '',
				userID: '', // 用户ID
				winProduct: '', // 中奖产品名称
				goodHeader: '', // 中奖商品图片
			  }
		  },
		  created() {
		  	let res = uni.getSystemInfoSync();
		  	let footH = uni.upx2px(160);
		  	this.scrollH = res.windowHeight - footH;
		  },
		  computed: {
			i18n() {
				return this.$t('index')
			},
			...mapGetters(['isLogin'])
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: this.i18n.winner_page.title
			});
		},
		  onShow() {
			// this.currentPage=1;
			// this.willDoList=[];
		 	//  his.onLoad2();
		 	// this.overlayShow = true
			if (this.isLogin) {
				// 获取当前用户ID
				getUserInfo().then(res => {
					if(res !== null || res !== undefined || res !== "") {
						this.userID = res.id
					} 
				})
			}
		  },
		  methods:{
			queryDetails: function() {
				this.overlayShow = false
				uni.navigateTo({
    				url: '/pages/lottery/lottert_myWinRecord/lottert_myWinRecord'
				});
			},
			  onLoad2() {
			  	let data = {
			  		type: this.ismk,
			  		page: this.currentPage,
			  		limitNum: this.limitNum
			  	};
			  	let that = this;
			  	getWillDoList(data).then(res => {
			  		that.loading = false;
			  		if (res == undefined || res.length <= 0||res==null) {
			  			that.finished = true;
			  			// if(that.currentPage<=1)
			  			// that.isEmpty=true;
			  			return;
			  		}
				    that.isEmpty=false;
			  		res.forEach(item => {
			  			that.willDoList.push(item);
			  		})
			  		//console.log(that.fightRecordList)
			  		that.currentPage = that.currentPage + 1;
			  	});
			  },
			  onRefresh() {
			  	let that=this;
			  	// 清空列表数据
				that.willDoList=[];
			  	//this.finished = false;
			    this.refreshing=true;
			  	// 重新加载数据
			  	// 将 loading 设置为 true，表示处于加载状态
			  	//this.loading = true;
			  	setTimeout(function() {//dfdfddf
					that.currentPage=1;
			  		that.onLoad2();
			  		that.refreshing = false;
			  	}, 1000);
			  }, 
			  getWin(good_fight_id){
				   let that=this;
				   getLotteryGoodDetail({goods_fight_id:good_fight_id}).then(res=>{
					if (res!= null) {
					        var c = -1;
					        for ( var i in that.willDoList) {
					            if (that.willDoList[i].id == res.id) {
					                c = i;
					                break;
					            }
					        }
					        if (c != -1) {
					            that.willDoList.splice(c, 1, res);
								//that.willDoList[c]=res;
								if (res.win_user) {
									that.willDoList[c].nick_name=res.win_user.nick_name;
									that.willDoList[c].play_num=res.win_user.win_time;
									// console.log('获胜者___', res.win_user)
									// 获奖者如果是当前用户则弹框告示
									let getUserMapId = uni.getStorageSync('USER_MAP_ID')
									if (this.userID) {
										if (res.win_user.nick_name && this.userID == res.win_user_id) {
											that.goodHeader = res.good_header
											this.winProduct = res.good_name
											that.overlayShow = true
										}
									} else if (getUserMapId) {
										if (res.win_user.nick_name && getUserMapId == res.win_user_id) {
											that.goodHeader = res.good_header
											this.winProduct = res.good_name
											that.overlayShow = true
										}
									}
								}
								
								// console.log('获胜者', res.win_user)
					        }
					} else {
					    setTimeout(function(){
					        that.getWin(good_fight_id);
					    }, 5000);
					}
				  });
			  },
			  caculateTime(lottery_time){
			  		    let str=lottery_time;
			  		 	//str = str.replace(/-/g,'/');
			  		 	var date = new Date(str);
			  		 	//console.log(date.getTime());
			  		 	var nowdate= new Date();
			  		 	let time=(date.getTime()-nowdate.getTime());
			  		 	if(time>0){
			  		 	    return time;
			  		 	}
			  },
			  finish(id){
			  	//倒计时结束重新获取抽奖信息
				//console.log(id)
			  	this.getWin(id);
			  },
			  //请求抽奖详情页面
			  lotteryDetail(item) {
			  	console.log(item.id)
			  	uni.navigateTo({
			  		url: '/pages/lottery/good_details/good_details?id=' + item.id
			  	});
			  },
		  }
	  }
</script>

<style lang="scss" scoped>
@import "@/common/font.css";
	.item{
		    margin: 10px auto 0;
		    width: 95%;
		    border: 1px solid #fff;
		    border-radius: 6px;
		    background:#fff;
			height: 280rpx;
	}
	.item-left{
		width: 30%;
		margin: 0 auto;
	}
	.item-right{
		width: 65%;
		/* padding: 5px 10px 5px 0; */
		margin: 0 auto;
	}
	.main-body{
		background-color: #f6f7f6;
		overflow-y: auto;
	}
	.item-right-title{
		padding-bottom: 20upx;
		    text-overflow: ellipsis;
		    overflow: hidden;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    line-clamp: 2;
		    -webkit-box-orient: vertical;
	}
	 .colon {
	    display: inline-block;
	    margin: 0 4px;
	    color: #ee0a24;
	  }
	  .block {
	    display: inline-block;
	    width: 22px;
	    color: #fff;
	    font-size: 12px;
	    text-align: center;
	    background-color: #ee0a24;
	  }
	  .active-img{
		      width: 51px;
		      height: 51px;
		      position: absolute;
		      top: 0;
		      left: 0;
	  }
	.bg-light-secondary {
    	background-color: none!important;
	}
	/deep/ .uni-page-head__title, uni-page-head .uni-page-head__title{
		font-size: 14px !important;
	}
	uni-page-head .uni-page-head__title{
		font-size: 13px !important;
	}
	.item-rt-btm-list{
		padding-bottom: 8upx;
	}
	/deep/ .van-count-down{
		color: #E93323;
		font-size: 36rpx;
	}

	.over-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		.over-block {
			width: 78%;
			height: 200upx;
			background-color: #fff;
			text-align: center;
			border-radius: 26upx;
			font-size: 32rpx;
			// line-height: 200upx;
			color: red;
			overflow: hidden;
		}
		.over-title{
			position: relative;
			padding-bottom: 14upx;
			background: #ff5420;
			background: -webkit-linear-gradient(to right, #ff5420, #ff9639);
			background: linear-gradient(to right, #ff5420, #ff9639);
			font-size: 40rpx;
			color: #f7eb08;
			margin-bottom: 20upx;
		}
		.over-ion01, .over-ion02{
			position: absolute;
			top: 10upx;
			width: 40upx;
			height: 40upx;
		}
		.over-ion01{
			left: 30upx;
			width: 50upx;
			height: 50upx;
			transform:rotate(30deg);
			-ms-transform:rotate(30deg); 	
			-moz-transform:rotate(30deg); 	
			-webkit-transform:rotate(30deg); 
			-o-transform:rotate(30deg); 
		}
		.over-ion02{
			top: 6upx;
			right: 30upx;
			width: 50upx;
			height: 50upx;
			transform:rotate(30deg);
			-ms-transform:rotate(30deg); 	
			-moz-transform:rotate(30deg); 	
			-webkit-transform:rotate(30deg); 
			-o-transform:rotate(30deg); 
		}
		.over-main{
			.big{
				font-size: 38rpx;
			}
			.sm{
				padding-left: 20upx;
				font-size: 26rpx;
			}
		}
	}

	.over-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		.over-block {
			position: relative;
			width: 486upx;
			height: 600upx;
			// background-color: #fff;
			// text-align: center;
			// border-radius: 26upx;
			// font-size: 32rpx;
			// line-height: 200upx;
			// color: red;
			overflow: hidden;
			background-image: url(../../../static/img/zj_bg.png);
			background-size: 100%;
		}
		.over-title{
			position: relative;
			height: 80upx;
			line-height: 80upx;
			// padding-bottom: 14upx;
			// background: #ff5420;
			// background: -webkit-linear-gradient(to right, #ff5420, #ff9639);
			// background: linear-gradient(to right, #ff5420, #ff9639);
			text-align: center;
			font-size: 30rpx;
			color: #fff;
			margin-bottom: 20upx;
		}
		.over-pic{
			margin: 40upx auto 0;
			width: 160upx;
			height: 160upx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			background-color: #fff;
			overflow: hidden;
		}
		.over-desc{
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.over-ion01, .over-ion02{
			position: absolute;
			top: 20upx;
			width: 40upx;
			height: 40upx;
		}
		.over-ion01{
			left: 30upx;
			width: 50upx;
			height: 50upx;
			transform:rotate(30deg);
			-ms-transform:rotate(30deg); 	
			-moz-transform:rotate(30deg); 	
			-webkit-transform:rotate(30deg); 
			-o-transform:rotate(30deg); 
		}
		.over-ion02{
			top: 6upx;
			right: 30upx;
			width: 60upx;
			height: 60upx;
			transform:rotate(30deg);
			-ms-transform:rotate(30deg); 	
			-moz-transform:rotate(30deg); 	
			-webkit-transform:rotate(30deg); 
			-o-transform:rotate(30deg); 
		}
		.over-main{
			text-align: center;
			.big{
				font-size: 36rpx;
			}
			.sm{
				font-size: 26rpx;
			}
			.sp{
				padding: 40upx 0;
				font-size: 30rpx;
				color: #fff;
			}
		}
		.over-btn{
			position: absolute;
			left: 50%;
			bottom: 40upx;
			margin-left: -130upx;
			width: 260upx;
			height: 60upx;
			line-height: 60upx;
			font-size: 30rpx;
			color: #fe4b11;
			background-image: linear-gradient(#fff542, #fdb86f);
			border-radius: 40upx;
		}
	}

</style>
